import React, { Component } from 'react'
import styles from './Navbar.module.css'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { Button, Space } from 'antd'
import { logout } from '../_redux/actions'

export default class Navbar extends Component {

  handleLogout = () => {
    this.props.logout()
  }

  render () {

    return (
      <div className={styles.container}>
        <div className={styles.content}>
          <Space className={styles.left}>
            <Link to="/home">薪酬管理系统</Link>
            <Link to={`/home/${this.props.userId}/salary`}>查看薪资</Link>
            <Link to={`/home/${this.props.userId}`}>个人信息</Link>
          </Space>
          <div className={styles.right}>
            欢迎 - {this.props.username}
            <Button type="link" onClick={this.handleLogout}>注销</Button>
          </div>
        </div>
      </div>
    )
  }
}

Navbar = connect(
  ({ $UserInfoState: { userInfo: { username } } }) => ({ username }),
  { logout }
)(Navbar)